<!DOCTYPE html>
<html class="pixel-ratio-1 watch-active-state">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Required meta tags-->

        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- Color theme for statusbar -->
        <meta name="discription" content="帝心畅玩是一款集合了全网好玩的传奇、仙侠、页游、手游、小说、漫画、直播等休闲娱乐于一体的APP，致力于打造专业的移动游戏休闲娱乐平台" />
        <!-- Your app title -->
        <title>帝心畅玩</title>
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="bookmark" href="/favicon.ico" type="imgde/x-icon" />
        <!-- Path to Framework7 Library CSS, Material Theme -->
        <link rel="stylesheet" href="./assets/css/zjs.css" />
        <!-- Path to Framework7 color related styles, Material Theme -->
        <link rel="stylesheet" href="./assets/vendor/icon/css/font-awesome.min.css" />
        <link rel="stylesheet" href="./assets/vendor/toastr/toastr.min.css?v=1" />
        <!-- Path to your custom app styles-->
        <style>
            #app {
                z-index: 0;
            }

            .zjs {
            }

            .view {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }

            

            .content-block{
                box-sizing: border-box;
                width: 100%;
                position: relative;
            }

            .flex-row{
                display: flex;
                flex-direction: row;
            }

            .flex-col{
                display: flex;
                flex-direction: column;
            }

            .flex-jc-ed{
                justify-content: flex-end;
            }

            .flex-jc-ct{
                justify-content:center;
            }

            .flex-jc-sb{
                justify-content: space-between;
            }

            .flex-jc-sa{
                justify-content: space-around;
            }

            .flex-1{
                flex: 1;
            }

            .register {
                background-image: url("./assets/imgs/bg-top.png");
                background-repeat: no-repeat;
                background-size: 100%;
                background-position: top;
            }

            .bg-view{
                background-image: url("./assets/imgs/bg-btm.png");
                background-repeat: no-repeat;
                background-size: 100% 100vh;
                background-position: 0px 50%;
            }

            .space-block{
                height: 50vh;
            }

            .register-form{
                width: 300px;
                background-color: #fdfcea;
                margin: 0 auto;
                padding: 12px;
                border-radius: 12px;
            }

            .lock-bg {
                background-color: rgba(0, 0, 0, 0.6);
                position: fixed;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                z-index: 9999;
            }

            .logo{
                position: absolute;
                top: 10px;
                left: 10px;
                background-image: url("./assets/icon.png");
                width: 64px;
                height: 64px;
                background-repeat: no-repeat;
                background-size: contain;
                border-radius: 8px;
            }

            section{
                display: block;
                margin: 0 0;
                padding: 12px;
            }

            label{
                position: relative;
            }

            label .clear-icon{
                position: absolute;
                right: 22px;
                bottom: 4px;
            }

            .inp-block{
                display: block;
                width: 100%;
                background-color: transparent;
                border: none;
                border-bottom: 1px #666 dashed;
                font-size: 1.6rem;
                height: 2rem;
                line-height: 2rem;
                outline: none;
            }

            .ins-btn{
                height: 2rem;
                line-height: 2rem;
                font-size: 1.6rem;
                background-color: transparent;
                color: #2196f3;
                outline: none;
                border: none;
            }

            .user-note{
                font-size: 1.6rem;
            }

            .user-note i.fa{
                color:#2196f3;
            }

            .user-note i.fa.fa-check-circle-o{
                color:#999;
            }

            .user-note a{
                color:#2196f3;
            }

            .hide{
                display: none;
            }
            .reg-btn{
                display: block;
                width: 22rem;
                text-align: center;
                margin: 0 auto;
                height: 4rem;
                border-radius: 2rem;
                border: solid #c84003 2px;
                color: #c84003;
                background-size: contain;
                background-color: #f3c514;
                line-height: 4rem;
                font-size: 2rem;
                font-weight: bold;
            }

        </style>
    </head>

    <body class="zjs">
        <!-- Views -->
        <div class="view register" id="app">
            <div class="lock-bg" v-show="show_lock"></div>
            <!-- page-->
            <div class="view bg-view flex-col flex-jc-sa">
                <div class="content-block space-block">
                    <div class="logo">

                    </div>
                </div>
                <div class="content-block flex-1">
                    <div class="register-form">
                        <section>
                            <div class="flex-row flex-jc-ct">
                                <label for="" class="flex-1">
                                    <input 
                                        class="inp-block"
                                        type="number"
                                        placeholder="输入手机号"
                                        v-model="phone"
                                        @focus="ph_clean_show=true"
                                        @blur="ph_clean_show=false"
                                    />
                                    <i
                                        class="fa fa-2x fa-times-circle clear-icon"
                                        :class="{'hide':!ph_clean_show}"
                                        @click="phone=''"
                                    ></i>
                                </label>
                            </div>
                        </section>
                        <section>
                            <div class="flex-row flex-jc-ct">
                                <label for="" class="flex-1">
                                    <input
                                        class="inp-block"
                                        type="number"
                                        placeholder="请输入验证码"
                                        v-model="sms"
                                        @focus="sms_clean_show=true"
                                        @blur="sms_clean_show=false"
                                    />
                                    <i
                                        class="fa fa-2x fa-times-circle clear-icon"
                                        :class="{'hide':!sms_clean_show}"
                                        @click="sms=''"
                                    ></i>
                                </label>
                                <button
                                    type="button"
                                    class="ins-btn"
                                    :disabled="sms_disable"
                                    @click="getSms"
                                >
                                    <span v-if="!sms_disable">获取验证码</span>
                                    <span v-if="sms_disable">{{ dis_time + "s" }}</span>
                                </button>
                            </div>
                        </section>
        
                        <section>
                            <div class="flex-row flex-jc-ct">
                                <label for="" class="flex-1">
                                    <input
                                        class="inp-block"
                                        type="password"
                                        placeholder="请输入6-16位字符密码"
                                        v-model="password"
                                        @focus="pwd_clean_show=true"
                                        @blur="pwd_clean_show=false"
                                    />
                                    <i
                                        class="fa fa-2x fa-times-circle clear-icon"
                                        :class="{'hide':!pwd_clean_show}"
                                        @click="password=''"
                                    ></i>
                                </label>
                            </div>
                        </section>
                        <section class="user-note">
                            <i
                                class="fa"
                                :class="{'fa-check-circle':note_checked,'fa-check-circle-o':!note_checked,}"
                                @click="note_checked=!note_checked"
                            ></i>
                            <span @click="note_checked=!note_checked">注册既代表同意</span>
                            <a href="usernote.html">《用户注册协议》</a>
                        </section>
                        <!--登录按钮-->
                        <section>
                            <a class="reg-btn" @click="register">注 册</a>
                        </section>
                    </div>
                    
                </div>
            </div>
            
            <!-- End of page-->
        </div>
        <script type="text/javascript" src="./assets/js/lib/lodash.js"></script>
        <script type="text/javascript" src="./assets/js/lib/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript" src="./assets/vendor/toastr/toastr.min.js?v=1"></script>
        <script type="text/javascript" src="./assets/js/tools.js?v=1.2"></script>
        <script type="text/javascript" src="./assets/js/lib/md5.min.js"></script>
        <script>
            function showPage() {
                $("#app").removeClass("hide");
            }
            var disInt = 60;
            var vm = new Vue({
                el: "#app",
                data: function() {
                    return {
                        has_err: false,
                        phone: "",
                        ph_clean_show: false,
                        tag: "",

                        sms: "",
                        dis_time: disInt,
                        sms_int: null,
                        sms_disable: false,
                        sms_err: false,
                        sms_clean_show: false,

                        password: "",
                        pwd_clean_show: false,
                        register_err: false,
                        was_register_err: false,
                        sms_token: "",

                        address: "",

                        pu: "",
                        go_page: "",

                        show_lock: false,
                        note_checked:true
                    };
                },
                methods: {
                    getPar() {
                        var self = this;
                        var search =
                            window.location.search == "" ? [] : window.location.search.split("?")[1].split("&");
                        search.forEach(function(v, i) {
                            var arr = v.split("=");
                            if (arr[0] == "tag") self.tag = arr[1];
                        });
                    },
                    goBack() {
                        location.href = "list.html";
                    },
                    gotoLogin() {
                        var self = this;
                        if (self.go_page != "") {
                            window.location.href = "login.html?gopage=" + self.go_page;
                        } else {
                            window.location.href = "login.html";
                        }
                    },
                    register() {
                        var self = this;
                        if(self.note_checked===false){
                            tip.warn('同意用户注册协议后，方可注册')
                            return;
                        }
                        self.has_err = false;
                        if (self.phone.length == 0) {
                            self.has_err = true;
                        }
                        if (self.sms.length == 0) {
                            self.has_err = true;
                        }
                        if (self.password.length == 0) {
                            self.has_err = true;
                        }
                        //sms_token

                        if (self.has_err == true) {
                            tip.warn('请填写正确的信息')
                            return;
                        }

                        var rpar = {
                            name: self.phone,
                            password: md5(self.password),
                            code: self.sms,
                            tag: self.tag
                        };

                        self.show_lock = true;
                        //login function
                        ajax.register({
                            type: "post",
                            param: rpar,
                            cb: function(data) {
                                tip.succ("您已经注册成功");
                                setTimeout(function() {
                                    location.href = "download.html";
                                }, 2000);
                                self.show_lock = false;
                            },
                            failCb(data) {
                                
                                tip.warn(data.info);
                                setTimeout(function() {
                                    self.show_lock = false;
                                }, 2000);
                            }
                        });
                    },
                    getSms() {
                        var self = this;
                        self.sms_err = false;
                        if (self.phone.trim().length == 0) {
                            self.sms_err = true;
                            return;
                        }

                        self.sms_disable = true;

                        self.sms_int = setInterval(function() {
                            if (self.dis_time > 0) {
                                self.dis_time--;
                            } else {
                                clearInterval(self.sms_int);
                                self.sms_int = null;
                                self.dis_time = disInt;
                                self.sms_disable = false;
                            }
                        }, 1000);

                        ajax.get_code({
                            param: {
                                name: self.phone
                            },
                            cb(data) {
                                if (data.status_code != 200) {
                                    tip.warn("获取验证码失败");
                                }
                            },
                            failCb(data){
                                if(data.status_code===300){
                                    tip.succ("您的号码已经注册过，系统将为您直接跳转");
                                    setTimeout(function(){
                                        location.href = "download.html";
                                    },2000)
                                } else {
                                    tip.warn("获取验证码失败");
                                }
                            }
                        });
                    }
                    // wechatLogin() {
                    //     var self = this;
                    //     var data = "nodata";
                    //     if (self.go_page != "") {
                    //         data = self.go_page;
                    //     }
                    //     window.location.href =
                    //         "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa4ca2a18e8e86afa&redirect_uri=http%3a%2f%2fwww.ccb717.com%2fn5xproject%2fauth&scope=snsapi_userinfo&response_type=code&state=authrouterccb717" +
                    //         data +
                    //         "#wechat_redirect";
                    // }
                },
                mounted: function() {
                    this.getPar();
                    showPage();
                }
            });
        </script>
    </body>
</html>
